<!--
 * @Author: weikang
 * @Description: 
 * @Date: 2023-12-19 10:27:30
 * @LastEditTime: 2023-12-20 20:24:02
 * @FilePath: \lianyungang-dashborad\src\model\salary.vue
-->
<template>
  <div class="model-panel">
    <my-title title="代发工资情况"></my-title>
    <div class="content-panel">
      <div class="box-panel">
        <div class="box-item" v-for="(item, index) in topData" :key="index">
          <div class="box-name">{{ item.name }}</div>
          <div class="box-num">{{ item.value }}</div>
        </div>
      </div>
      <div class="leiji-box-panel">
        <div class="leiji-item" v-for="(item, index) in leijiData" :key="index">
          <div class="leiji-name">{{ item.name }}</div>
          <div class="leiji-content">
            <div class="leiji-num">
              <span>{{ item.value }}</span
              >亿元
            </div>
            <div class="leiji-percent" :class="compareClass(item)">
              {{ item.percentText }}{{ item.percent }}% {{ compareIcon(item) }}
            </div>
          </div>
        </div>
      </div>
      <div class="chart-panel">
        <div class="chart" ref="chartRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTitle from "@/components/MyTitle.vue";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { getSalaryMonth, getSalary } from "@/api/apis";

const topData = reactive([
  {
    name: "月代发工资项目",
    value: 16,
    prop: "ydfgzxm",
  },
  {
    name: "未代发工资项目",
    value: 14,
    prop: "wdfgzxm",
  },
  {
    name: "月代发工资总额(亿元)",
    value: 12,
    prop: "ydfgzze",
  },
]);
const leijiData = reactive([
  {
    name: "当年累计代发工资",
    value: 276,
    isUp: 0,
    percent: 10,
    percentText: "同比",
    prop: "dnljdfzg",
  },
  {
    name: "本月代发工资",
    value: 76,
    isUp: 1,
    percent: 10,
    percentText: "环比",
    prop: "bydfgz",
  },
]);

const chartRef = ref();
let myChart = null;
const monthData = ref([]);

onMounted(() => {
  myChart = echarts.init(chartRef.value);
  myChart.setOption(getOptions());

  window.addEventListener("resize", () => {
    myChart.resize();
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    myChart.resize();
  });
});

const compareClass = (item) => {
  return item.isUp === 0 ? "orange-text" : "green-text";
};
const compareIcon = (item) => {
  return item.isUp === 0 ? "↓" : "↑";
};

const getOptions = () => {
  const option = {
    tooltip: {},
    title: {
      text: "近12个月代发额（万元）",
      textStyle: {
        color: "#5BFFF9",
        fontSize: 14,
      },
    },
    grid: {
      top: 50,
      left: "1%",
      right: "1%",
      bottom: "8%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          rotate: 45, // 倾斜度 -90 至 90，默认为0
          textStyle: {
            color: "#90979c",
            margin: 15,
          },
        },
        axisTick: {
          show: false,
        },
        data: monthData.value.map((item) => item.date),
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.05)",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: "#90979c",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "line",
        smooth: true, //是否平滑曲线显示
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: "#6BBAAF", // 线条颜色
          },
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#fff",
          },
        },
        itemStyle: {
          normal: {
            color: "#6BBAAF",
          },
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#0096FF",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0, 0)",
                },
              ],
              false
            ),
            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
        data: monthData.value.map((item) => item.total),
      },
    ],
  };
  return option;
};

getSalaryMonth().then((res) => {
  const { data } = res;
  monthData.value = data.data;
  myChart.setOption(getOptions());
});

const dataInfo = ref({});
getSalary().then((res) => {
  const { data } = res;
  dataInfo.value = data;
  topData.forEach((item) => {
    item.value = data[item.prop];
  });
  leijiData.forEach((item) => {
    const value = data[item.prop];
    item.value = value.total;
    item.isUp = value.isUp;
    item.percent = value.compareValue;
  });
});
</script>

<style lang="scss" scoped>
.model-panel {
  height: 587px;
  .box-panel {
    background: url("/src/assets/box-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 82px;
    padding: 14px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    .box-item {
      padding-left: 16px;
    }
    .box-item + .box-item {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 80%;
        margin-top: 10%;
        background: #d8d8d8;
      }
    }
    .box-name {
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
    }
    .box-num {
      font-size: 24px;
      font-family: DINPro, DINPro;
      font-weight: bold;
      color: #ffc23e;
      line-height: 30px;
      letter-spacing: 2px;
      margin-top: 10px;
    }
  }
  .content-panel {
    padding: 10px;
  }

  .leiji-box-panel {
    background: url("/src/assets/saler-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 106px;
    padding: 14px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    color: #fff;
    margin-top: 20px;
    .leiji-item {
      width: 50%;
    }
    .leiji-name {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 2px;
    }
    .leiji-content {
      display: flex;
      align-items: self-end;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 18px;
      margin-top: 16px;
      .leiji-num {
        span {
          font-size: 24px;
          font-family: DINPro, DINPro;
          font-weight: bold;
          color: #ffffff;
          margin-right: 5px;
        }
      }
      .leiji-percent {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ff953e;
        margin-left: 20px;
      }

      .green-text {
        color: #09fe9a;
      }
    }
  }
}
.chart-panel {
  padding-top: 24px;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  .chart {
    height: 280px;
  }
}
</style>